<template>
  <div class="card">
    <div class="custom-scrollbar" :style="{ maxHeight: autoHeight }">
      <el-tree
        ref="slowRef"
        class="tel-tree"
        style="max-width: 600px"
        :data="treeData"
        show-checkbox
        :default-expand-all="false"
        node-key="seq"
        highlight-current
        :props="defaultProps">
          <template #default="{ node, data }">
            <span>{{ data.name }} {{ data.description }}</span>
          </template>
      </el-tree>
    </div>
    <div class="buttons">
      <el-button class="pry-btn" @click="handleWatch()">遥测观察</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { ElMessage } from 'element-plus'
import { fetchSlowTmList } from '@/api/loads-api'
import { useAutoHeightMixin } from "@/mixins/AutoHeightMixin.js"

const { autoHeight,updateHeight } = useAutoHeightMixin()
const slowRef = ref(null)
const treeData = ref([{
  seq: -1,
  name: '',
  description: '缓变遥测',
  children: []
}
])

const defaultProps = {
  label: (v) => { return `${v['name']} ${v['description']}` },
  children: 'children'
}

const initData = () => {
  fetchSlowTmList({}, (response) => {
    const resData = response.data.rows
    treeData.value[0].children = resData
  }, (error) => {
    console.log("error:", error)
  })
}

const handleWatch = () => {
  const currentUrl = window.location.href;
  let newUrl = currentUrl.replace('upair/index', 'slow_tm_loads')
  const seqs = slowRef.value.getCheckedKeys()
  console.log("seqs:", slowRef.value)
  console.log("seqs:", seqs)
  if(seqs.length === 0) {
    ElMessage({
      message: '请选中至少一条遥测量',
      type: 'warning',
    })
  } else {
    if(seqs[0] === -1) {
      seqs.splice(0, 1)
    }
    window.open(newUrl + '?seq=' + seqs.join(","), "_blank");
  }
}

onBeforeMount(() => {
  initData()
})
</script>

<style lang="scss" scoped>
.buttons {
  padding: 2em 0 10px 41px;
}
.custom-scrollbar {
  overflow-y: auto;
}
</style>